<template>
	<view class="breadcrumb">
		<view class="item" v-for="(p, i) in paths" :key="i">
			<!-- 当前路径不是列表中的最后一个 -->
			<template v-if="i<paths.length-1">
				<navigator :url="p.url" :open-type="p.openType">{{p.title}}</navigator>
				<text class="separator">&gt;</text>				
			</template>
			<!-- 当前路径是列表中的最后一个 -->
			<text v-else>{{p.title}}</text>
		</view>	
	</view>
</template>

<script>
	export default {
		//自定义属性
		//props: ['paths']
		props: {
			paths: {				//属性名
				type: Array,		//属性值的类型
				required: true		//该属性是不是必须出现的
			}
		}
	}
</script>

<style lang="scss">
.breadcrumb {
	//修改弹性容器的主轴方向：横向
	flex-direction: row;
	padding: $uni-spacing-col-lg $uni-spacing-row-base;
	background-color: $uni-bg-color-grey;
	.item {
		//修改弹性容器的主轴方向： 横向
		flex-direction: row;
		.separator {
			margin: 0 $uni-spacing-row-sm;
		}
	}
}
</style>